.png)
اضف اداة معلومات التدوينة اسفل الموضوع لبلوجر
السلام عليكم ..... زوار مدونة نيو ويب بلوجر الكرام
اقدم لكم موضوع عن طريقة اضافة اداة معلومات التدوينه اسفل الموضوع بطريقة سهلة ؛ وسوف تتكون من :
عنوان التدوينه - التقييم - التسميات - الكاتب - توقيت النشر - عدد المشاهدات - صوره الموضوع ...
صورة للمعاينة
نأتى الأن الى التركيب :
1- قم بالذهاب الي القالب --> ثم تحرير Html
2- اضغط داخل القالب من لوحه التحكم ctrl+f
أبحث عن </head>
ضع فوقة هذا الكود
<style>#views-container {width: 85px;float: right;}.mbtloading{background: url('https://ayana-tech1.googlecode.com/svn/MA/imgaes/loading/0.gif') no-repeat left center;width: 16px;height: 16px;}.viewscount {float: right;color: #fff!important;font: 12px Electrolize,ge_ss_threeregular;}.views-text {float: left;font: 12px Electrolize,ge_ss_threeregular;color: #fff;margin-left: -8px;}.fa-eye:before {content: "\f06e";margin-right: -14px;color:#fff!important;}span#postviews {float: left;margin-left: -105px;margin-top: -2px;color: #E22E2E;font-weight: 600;margin-top: 1px;}</style><a href='http://new2015.blogspot.com'/><link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
ثم ابحث عن </body>
ضع فوقه هذا الكود
<-- Post Views Script by MBT --><script type='text/javascript'>window.setTimeout(function() {document.body.className = document.body.className.replace('loading', '');}, 10);</script><a href='http://new2015.blogspot.com'/><script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/><script>$.each($('a[name]'), function(i, e) {var elem = $(e).parent().find('#postviews').addClass('mbtloading');var blogStats = new Firebase("https://ayanatech.firebaseIO.com/pages/id/" + $(e).attr('name'));blogStats.once('value', function(snapshot) {var data = snapshot.val();var isnew = false;if(data == null) {data= {};data.value = 0;data.url = window.location.href;data.id = $(e).attr('name');isnew = true;}elem.removeClass('mbtloading').text(data.value);data.value++;if(window.location.pathname!='/'){if(isnew)blogStats.set(data);elseblogStats.child('value').set(data.value);}});});</script>
وهذه اخر خطوة تحتاج الى الأنتباه جيدا ؛ الكود التالى ضعه فوق ازرار المشاركه او تعريف الكاتب ..
<-- more info post --><div class='simptip-position-top' data-tooltip='معلومات التدوينه' itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate' style='width:98%;padding:7px 9px 7px;margin:10px 0;font-size:12px;color:#fff;line-height:1.6em;font-family:Electrolize,ge_ss_threeregular;border:1px solid #222;box-shadow:2px 0.5px 2px #444;box-shadow: 0 3px 6px rgba(0,0,0,0.4),0px 2px 16px #000 inset;'><span class='icon-rss'/> عنوان التدوينة: <span> <data:post.title/></span><br/><span class='icon-star'/> تقييم : <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'><span itemprop='average'>100</span>من <span itemprop='best'>100</span></span>مرتكز على <span itemprop='votes'>53</span> تقييم.<b><span itemprop='count'/></b><br/><span class='icon-user'/> الكاتب / المدير : <data:post.author/><br/><span class='fa fa-tags' style='padding-left:2px;'/>التسميات : <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>،</b:if></b:loop></b:if><br/><span class='fa fa-random' style='padding-left:2px;'/>توقيت النشر : <data:post.timestamp/><br/><div class='comment-post-ma'><i class='fa fa-comments' style='padding-left:2px;'/>عدد التعليقات : <data:post.numComments/></div><div id='views-container'><span class='views-icon'/><div class='views-text'><i class='fa fa-eye'/>عدد المشاهدات :</div><span class='mbtloading viewscount' id='postviews'/></div><img class='arrow-img-about' title='صوره الموضوع' expr:src='data:post.thumbnailUrl' style='border: 3px solid #222;box-shadow:1px 1px 2px #444;padding-left:2px;float:left;margin-top:-86px;'/><a href='http://new2015.blogspot.com/'/></div></div>
الى هنا تم الأنتهاء ؛ كل من يحتاج الى مساعدة يترك رد بالمشكلة وسوف نساعده .. نتمنى من الله التوفيق للجميع
